<template>
  <article class="media ">
    <div class="block">
      <div>
        <span class="tip">热门内容，来自：{{block.type}}</span>
      </div>
      <div class="level ">
        <div >
          <img
            width="25px"
            :src="block.head"
            style="vertical-align:middle;"
          >
          <strong style="margin:12px">{{block.nickname}}</strong>
        </div>
      </div>
      <div>
        <h4 style="margin:6px;">
          {{block.title}}
        </h4>
      </div>
      <div style="text-align:center;">
        <img
          height="215px"
          :src="block.img"
        >
      </div>
      <div>
        <p style="margin:6px;">{{block.content}}</p>
      </div>
      <div style="margin:15px;">
        <div style="color:#1f90ec;float:left;" >
          <i class="fas fa-thumbs-up"></i>
          <span style="margin-left:3px;">赞同{{block.upvoteAmount}}</span>
        </div>
        <div class="icon-down">
          <i class="fas fa-angle-down"></i>
        </div>  
        <div class="icon-comments">
          <i class="far fa-comments"></i>
          <span style="margin-left:3px;">评论{{block.commentAmount}}</span>
        </div> 
         <div class="icon-star" >
          <i class="far fa-star"></i>
          <span class="list">
            ···
          </span>
        </div>   
      </div>     
    </div>

  </article>
</template>

<script>
export default {
  name: "ContentBlock",
  props:["block"]
}
</script>



<style scoped>
.block{
  width: 100%;
background:white ;
height:430px;
box-shadow: 0,0,0,0;
}
.tip{
  color:gray;
   font-size:12px; margin:6px
}
.level {
  margin: 6px;
  font-size: 12px;
  height: 34px;
}
.icon-down{
margin-left:15px;
color:#1f90ec;
float:left;
}
.icon-comments{
color:gray;
float:left;
margin-left:20px
}
.icon-star{
  margin-left:15px;
  color:gray;
  float:left;
}
.list{
color:gray;
margin-left:15px;
 text-align:center;
}


</style>